<style scoped>

.newdoclist {
  
  
}

.search {
  padding-bottom: 20px;
}

.search span {
  color: #68777c;
  font-weight: bold;
  padding-right: 18px;
}

.search button {
  background-color: #00a8f7;
  color: #fff;
  margin-left: 8px;
}

.top {
  margin-bottom: 20px;
  border-top: 1px dashed #cccccc;
}
.wraper .headline {
  position: relative;
  font-size: 12px;
  color: #303134;
  font-weight: bold;
  margin: 10px 0;
  line-height: 32px;
}

.wraper .add-agent {
  position: absolute;
  top: 0px;
  right: 30px;
  background-color: #348bf2;
  color: #fff;
}

.iconfont {
  font-size: 14px;
}

.red-font {
  color: #ff1f1f;
}

.fixed-bottom {
  padding-left: 20px;
  padding-right: 20px;
  height: 80px;
  line-height: normal !important;
  position: fixed;
  left: 210px;
  right: 0;
  bottom: 0;
  z-index: 999;
  text-align: center;
  background-color: rgb(255, 255, 255);
  box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.28);
}
.sidehide {
  left: 75px;
}
.pro {
  margin-bottom: 10px;
}

/* 表格样式 start*/

.pro-card {
  margin-bottom: 10px;
}

.pro-card-head {
  background-color: #e6e7eb;
  line-height: 38px;
  border: 1px solid #ddd;
}

.pro-card-title {
  font-size: 14px;
  color: #333;
  font-weight: bold;
  padding-left: 20px;
}

.pro-card-headr {
  padding-right: 10px;
  text-align: right;
}

.pro-card-content {
  clear: both;
}

.pro-paramname {
  text-align: center;
  background-color: #e6e7eb;
  font-size: 14px;
  color: #333;
  border-right: 1px solid #ddd;
}

.pro-paramvalue {
  padding-left: 10px;
  border-right: 1px solid #ddd;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pro-card-contentrow {
  line-height: 40px;
  border-left: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}

/* 表格样式  end */

/* 分页 start */

.page {
  margin: 0;
}

.ivu-page {
  padding-bottom: 150px;
}

/* 分页 end */
</style>
<style>
/* 地图的区域  .amap-demo */
.amap-demo {
    height: 300px !important;
    margin-bottom:15px;
}
.newdoclist .ivu-input-type textarea {
    resize: none;
    height: 36px !important;
}
.a-link {
  color: #4074e1;
  text-decoration: underline;
  cursor: pointer;
}
.newdoclist .ivu-input-group .ivu-input {
  margin-top: -1px;
}
.newdoclist #footer{
        height: 80px;
        line-height: 80px;
        position: fixed;
        bottom: 0;
        z-index:1000;
        text-align: center;
        background-color: #FFF;
        box-shadow: -1px -3px 2px #E3E3E3;
    }
    /* .newdoclist .address .ivu-input-group-append{
        vertical-align: middle;
        border:none !important;
    }
    .newdoclist .address .ivu-input-group-append button{
        background-color: #fafafa;
        border-right:1px solid #bebebe;
        border-top:1px solid #bebebe;
        border-bottom:1px solid #bebebe;
       border-left:none;
       border-top-right-radius:2px;
       border-bottom-right-radius:2px;
       height: 36px !important;
       
    }
    .newdoclist .address input.ivu-input{
        height: 35px !important;
    }
    .newdoclist .add1 input.ivu-input{
        height: 35px !important;
    }
    .newdoclist .same .ivu-form-item{
        padding-right:0px;
    }
     */
     .newdoclist  .shen label.ivu-form-item-label{
        height: 36px !important;
    }
    .newdoclist .address .ivu-input-group-append{
        background-color: #fafafa;
        border-right:1px solid #bebebe;
        border-top:1px solid #bebebe;
        border-bottom:1px solid #bebebe;
       border-left:none;
       border-top-right-radius:2px;
       border-bottom-right-radius:2px;
       height: 36px !important;
        position: relative;
        top: -1px;
    }
</style>



<template>
    <div class="newdoclist">
        <product-title></product-title>
        <div class="wraper" style="padding:0 30px;">        
            <div class="pro common-box-header">
                <Row>
                    <h3 >
                       基本信息
                    </h3>
                </Row>
            </div>
            <div class="common-box-body">
                <Form  :model="formdata" ref="formdata1" :rules="ruleCustom1">
                    <Row>
                        <Col :xs="24" :sm="24" :md="6" :lg="6" class="shen">
                            <FormItem  label="机构代码">
                                <Input type="text" v-model="formdata.agency_code"   placeholder="请输入机构代码"></Input>
                            </FormItem>
                        </Col>
                        <Col :xs="24" :sm="24" :md="6" :lg="6" class="shen" >
                            <FormItem prop="name" label="机构名称">                                
                                <Input type="text"  v-model="formdata.name"  placeholder="请输入机构名称"></Input>                               
                            </FormItem>
                        </Col>
                        <Col :xs="24" :sm="24" :md="6" :lg="6" class="shen">
                            <FormItem  label="机构简称">                                
                                <Input type="text"  v-model="formdata.shortn"  placeholder="请输入机构简称"></Input>                               
                            </FormItem>
                        </Col>
                        <Col :xs="24" :sm="24" :md="6" :lg="6"  class="same shen">
                            <FormItem label="设立时间">
                                    <DatePicker  type="date" @on-change="datachange($event,formdata,'reg_date')" v-model="formdata.reg_dateall"  placeholder="请选择设立时间" :transfer=true placement="bottom"></DatePicker>  
                            </FormItem>
                        </Col> 
                        <Col :xs="24" :sm="24" :md="6" :lg="6">
                            <FormItem  label="联系电话" prop="tel">
                                <Input type="text"  v-model="formdata.tel"   placeholder="请输入联系电话"></Input>
                            </FormItem>
                        </Col>
                        <Col :xs="24" :sm="24" :md="6" :lg="6">
                            <FormItem label="负责人" >                                
                                <Input type="text"  v-model="formdata.principal" placeholder="请输入负责人"></Input>                               
                            </FormItem>
                        </Col>
                        <Col :xs="24" :sm="24" :md="6" :lg="6" class="same">
                            <Form-item label="角色">
                                <Select v-model="formdata.role_id" :label-in-value="true" @on-change="v=>{ setOption(v,'type')}"  placeholder='请选择角色'>
                                    <Option :value="item.id" v-for="item in roleList" :key="item.id">{{item.name}}</Option>
                                </Select>
                          </Form-item>
                        </Col>
                        <Col :xs="24" :sm="24" :md="6" :lg="6">
                            <FormItem label="机构类型">
                                <Select placeholder="请选择机构类型"  v-model="formdata.cate">  
                                    <Option v-for="item in orgList" :value="item.name" :key="item.name">{{item.name}}</Option>
                                </Select>
                            </FormItem>
                        </Col>
                        <Col :xs="24" :sm="24" :md="12" :lg="12">
                            <FormItem label="所属机构">
                                <Select filterable  placeholder="请选择所属机构"  v-model="formdata.parent">  
                                    <Option value="0" >公司直辖</Option>
                                    <Option v-for="item in porgList" :value="item._id" :key="item._id">{{item.name}}</Option>
                                </Select>
                            </FormItem>
                        </Col>
                        <Col :xs="24" :sm="24" :md="12" :lg="12">
                            <FormItem label="持证状态">
                                <Select filterable  placeholder="请选择持证状态"  v-model="formdata.holder">  
                                    <Option value="1">有证</Option>
                                    <Option value="2">备案</Option>
                                </Select>
                            </FormItem>
                        </Col>
                    </Row>   
                </Form>
            </div>

            <div class="pro common-box-header">
                <Row>
                    <h3 >
                       其他信息
                    </h3>
                </Row>
            </div>
            <div class="common-box-body">
               <Form > 
                    <Row>
                        <Col :xs="24" :sm="24" :md="6" :lg="6" class="same">
                            <FormItem label="邮政编码">                                
                                <Input type="text"  v-model="formdata.postcode" placeholder="请输入邮政编码"></Input>                               
                            </FormItem>
                        </Col>
                        <Col :xs="24" :sm="24" :md="6" :lg="6">
                            <FormItem  label="注册地">
                                <Input type="text" v-model="formdata.registe_addr" placeholder="请输入注册地"></Input>
                            </FormItem>
                        </Col>
                        <Col :xs="24" :sm="24" :md="6" :lg="6"  class="same">
                            <FormItem label="所属地区">
                               <Cascader :data="area_data"  :value="formdata.area_id" trigger="hover" @on-change="areaChange" placeholder="请输入所属地区"></Cascader>
                            </FormItem>
                        </Col>
                        <Col :xs="24" :sm="24" :md="6" :lg="6">
                            <FormItem label="状态" >                                
                                 <Select placeholder="选择状态"  v-model="formdata.status">  
                                    <Option value="营业">营业</Option>
                                    <Option value="停业">停业</Option>
                                    <!-- <Option value="吊销">吊销</Option>                      
                                    <Option value="撤销">撤销</Option>
                                    <Option value="改建">改建</Option>                      
                                    <Option value="停业整顿">停业整顿</Option> -->
                                </Select>                              
                            </FormItem>
                        </Col>
                    </Row>   
                    <Row>
                        <Col :xs="24" :sm="24" :md="12" :lg="12" class="address shen">
                            <FormItem label="地址" >                                
                                <Input type="text"  v-model="formdata.address" placeholder="请输入地址"><Button slot="append" icon="ios-search"  @click="addressChange()">在地图中定位</Button></Input>                               
                            </FormItem>
                        </Col>
                        <Col :xs="24" :sm="24" :md="12" :lg="12" class="add1 same shen" >
                            <FormItem label="经纬度">
                               <Input v-model="lat_lng" disabled placeholder="经纬度自动展示"></Input>           
                            </FormItem>
                        </Col>

                        <i-col :xs="24" :lg="16" v-show="mapShow">
                            <Form-item>
                                <el-amap vid="amapDemo" class="amap-demo" :plugin="plugins" :center="mapCenter" style="padding:10px;border: 1px solid #EDEDED">
                                </el-amap>
                            </Form-item>
                        </i-col>
                    </Row>   
                </Form>
            </div>


            
            <div class="common-box-body" style="margin-top:10px;">
                <Form>
                    <Row>
                        <i-col :md="24" :lg="12" class="shen">
                            <FormItem label="备注信息">
                                <Input type="textarea"  v-model="formdata.remark" :autosize="true" placeholder="请填写备注信息"></Input>
                            </FormItem>
                        </i-col>
                        <i-col :md="24" :lg="12" class="shen">
                            <FormItem label="作息时间">
                               <Input type="textarea"  v-model="formdata.schedule" :autosize="true" placeholder="请填写作息时间"></Input>
                            </FormItem>
                        </i-col>
                    </Row>   
                   
                </Form>
            </div>
        </div>
        <div id="footer"  style="padding:0 30px;">
            <Button v-if="$isShow('yun_org/update2')" type="primary" shape="circle" id="submit" :disabled="tableaction" @click="handleSubmit('formdata1')" style="border-radius: 30px !important;margin-top:25px;">
                <Icon type="checkmark-circled"></Icon>
                保存 / 提交
            </Button>
            <Button id="back" shape="circle" style="border-radius: 30px !important;background:#77B4F5;color:white;font-size:14px;margin-top:25px;" @click='back'>返回</Button>
        </div>
    </div>
</template>

<script>
import productTitle from "../../components/productTitle";
import city from '../../asset/js/city';
import { lazyAMapApiLoaderInstance  } from 'vue-amap';
import {update2,get_one,getOrgRole } from '../../api/org.js'
import { getAllCate , getParentCate } from '../../api/yun_org'
export default {
  data() {
      const validateMobile =(rule, value, callback)=>{
                    var re=/(^[0-9]{3,4}\-[0-9]{3,8}$)|(^[0-9]{3,8}$)|(^\([0-9]{3,4}\)[0-9]{3,8}$)|(^0{0,1}13[0-9]{9}$)|(^[0-9]{3,4}\-[0-9]{3,8}\-[0-9]{0,5})|(^1[3|4|5|7|8][0-9]{9}$)/;
                    if(!re.test(value)){
                        callback(new Error('请输入正确电话'));
                    }
                }; 
    return {
        mapShow:false,
        X1:false,
        X2:false,
        address:'',
        plugins: ['Geolocation','PlaceSearch'],
        mapCenter:[113.63305, 34.767174],
         _Marker:{},
         tableaction : false,
        area_data: city,//传入的地区
        roleList:[],
        formdata:{
            holder:'',//持证状态
            // lng_lat: '',
            area_id: [],
            lat:'',
            lng:'',
            reg_date:"",
            role_id:'',
            reg_dateall:'',
            
        },
        orgList:[],
        porgList:[],
        ruleCustom1: {
        name:[{ required: true, message: "该信息不能为空" }],
        tel:[
            {message:'请输入正确电话',trigger: 'blur,change'}

        ]
        // reg_date:[{ required: true, message: "该信息不能为空" }],
        // principal:[{ required: true, message: "该信息不能为空" }],
        // cate:[{ required: true, message: "该信息不能为空" }],
        // address:[{ required: true, message: "该信息不能为空" }],
      },
    //   ruleCustom2: {
    //     status:[{ required: true, message: "该信息不能为空" }],
    //     area_id:[{ required: true, message: "该信息不能为空" }],
    //     address:[{ required: true, message: "该信息不能为空" }],
    //     lat:[{ required: true, message: "该信息不能为空" }],
    //   },
    };
  },
  components: {
    productTitle
  },
  computed:{
            lat_lng:function(){
                if(!this.formdata.lat||!this.formdata.lng){
                    return '';
                }else{
                    console.log(this.formdata.lat+','+this.formdata.lng,"222")
                    return this.formdata.lat+','+this.formdata.lng;
                }
            }
        },
  created() {

    this.getdetail().then((data)=>{
        this.getOrgCate()
        this.getPorgCate(data.id)
    }

    );
    this.getRole();
  },
  mounted(){
        this.$nextTick(function () {
            document.getElementById('footer').style.width = getComputedStyle(document.getElementsByClassName('newdoclist')[0]).width;

        })
    // 调用高德地图
      lazyAMapApiLoaderInstance.load().then(() => {
                this.map = new AMap.Map('amapDemo', {
                    center:this.mapCenter,
                    zoom:15
                });
                this._Marker = new AMap.Marker({
                    map:null,
                })
                var _self = this
                this.map.on("click",function(event){
                    _self.formdata.lng = event.lnglat.lng;
                    _self.formdata.lat = event.lnglat.lat;
                      console.log(_self.formdata.lat+','+_self.formdata.lng,"111");
                      setTimeout(()=>{
                        _self.mapShow = false;
                      },1000);
                })
                AMap.event.addListener(this._Marker,'dragend',function(){
//                alert(this._Marker.getPosition( ))
//                alert(getPosition( ))
                })
//
            });
            
    },
  methods: {
      //获取该机构可选的父级机构
      
      getPorgCate(id){
          let _params = {
              id:id
          }
          new Promise((resolve, reject) => {
            getParentCate(_params).then(response => {
                if (response.data.err == 0) {
                    this.porgList = response.data.data;
                    let _parent = this.formdata.parent
                    this.formdata.parent = ''
                    setTimeout(()=>{
                        this.$set(this.formdata,'parent',_parent)
                    },500)
                } else {
                    this.$Message.error(response.data.info);
                }
                resolve();
            }).catch(error => {
                reject(error);
            });
        });
      },
      //获取所有机构
      getOrgCate(){
        new Promise((resolve, reject) => {
                getAllCate().then(response => {
                    if (response.data.err == 0) {
                        this.orgList = response.data.data;
                    } else {
                        this.$Message.error(response.data.info);
                    }
                    resolve();
                }).catch(error => {
                    reject(error);
                });
        });
      },
    ///获取角色列表
    getRole() {
        new Promise((resolve, reject) => {
            getOrgRole().then(response => {
                if (response.data.err == 0) {
                    this.roleList = response.data.data;
                } else {
                    this.$Message.error(response.data.info);
                }
                resolve();
            }).catch(error => {
                reject(error);
            });
        });
    },
      // 角色idname传值
    setOption(value,type){
        this.formdata.role_id = value.value;
        this.formdata.role_name = value.label;
    },
    //   点击返回
    back(){
        this.$router.back(-1)
    },
    //时间转换
        datachange(date,obj,param){
            obj[param] = date
            console.log(this.formdata.reg_date,"date")
        },
    /**
     * @augments
     * 获取id数据,进行页面展示,页面开始进来自执行
     * 函数类型
     * 
     */
    getdetail(){
        // console.log(this.$route.params.id,'id')
        var _site = {
            mongo_id:this.$route.params.mongo_id
        }
       
        return new Promise((resolve, reject) => {
            get_one(_site).then(response => {
                if (response.data.err == 0) {
                    // this.formdata.parent = response.data.data.parent
                    this.$set(this.formdata,'parent',response.data.data.parent)
                    if(response.data.data.reg_date){
                        this.formdata.reg_dateall = response.data.data.reg_date;
                        this.formdata.reg_date = this.formdata.reg_dateall
                        console.log(this.formdata.reg_date,"this.formdata.reg_date")
                    }else{
                        this.formdata.reg_date = ""
                    }
                    if(response.data.data.area_id.length==1){
                        this.formdata.area_id = [response.data.data.area_id[0],'0']
                        console.log(this.formdata.area_id,".........002")
                    }else if(response.data.data.area_id.length==2){
                        this.formdata.area_id = [response.data.data.area_id[0],response.data.data.area_id[1],'0']
                    }else if(response.data.data.area_id.length==3){
                            this.formdata.area_id = response.data.data.area_id
                        // this.formdata.area_id = [response.data.data.area_id[0],response.data.data.area_id[1],response.data.data.area_id[2]]
                    }else{
                        this.formdata.area_id = ""
                    }
                    // role_id
                    if(response.data.data.role_id){
                        this.formdata.role_id = parseInt(response.data.data.role_id)
                    }else{
                        this.formdata.role_id = ""
                    }
                    if(response.data.data.agency_code){
                        this.formdata.agency_code = response.data.data.agency_code;
                    }else{
                        this.formdata.agency_code = ""
                    }
                    if(response.data.data.name){
                    this.formdata.name = response.data.data.name;
                    }else{
                        this.formdata.name = '';
                    }
                    if(response.data.data.holder){
                    this.formdata.holder = response.data.data.holder;
                    }else{
                        this.formdata.holder = '';
                    }
                    if(response.data.data.shortn){
                        this.formdata.shortn = response.data.data.shortn;
                    }else{
                        this.formdata.shortn = ""    
                    }
                    if(response.data.data.tel){
                        this.formdata.tel = response.data.data.tel;
                    }else{
                        this.formdata.tel = ""
                    }
                    if(response.data.data.cate){
                        this.formdata.cate = response.data.data.cate;   
                    }else{
                        this.formdata.cate = ""
                    }    
                    if(response.data.data.principal){
                        this.formdata.principal = response.data.data.principal;   
                    }else{
                        this.formdata.principal = '';
                    }  
                    if(response.data.data.postcode){
                        this.formdata.postcode = response.data.data.postcode;   
                    }else{
                        this.formdata.postcode = ""
                    }     
                    if(response.data.data.address){
                        this.formdata.address = response.data.data.address;  
                    }else{
                        this.formdata.address = '';
                    }  
                    if(response.data.data.remark){
                        this.formdata.remark = response.data.data.remark;
                    }else{
                        this.formdata.remark = ""
                    }  
                    if(response.data.data.status){
                        this.formdata.status = response.data.data.status;
                    }else{
                        this.formdata.status = ""
                    }   
                    if(response.data.data.schedule){
                        this.formdata.schedule = response.data.data.schedule;
                    }else{
                        this.formdata.schedule = ""
                    }  
                    if(response.data.data.registe_addr){
                        this.formdata.registe_addr = response.data.data.registe_addr;
                    }else{
                        this.formdata.registe_addr = ""
                    }  
                    if(response.data.data.point){
                        this.formdata.lat = response.data.data.point.split(',')[0];
                        this.formdata.lng = response.data.data.point.split(',')[1];
                        this.mapCenter[0] = response.data.data.point.split(',')[0];
                        this.mapCenter[1] = response.data.data.point.split(',')[1];
                        this.map.setCenter(this.mapCenter);
                        this._Marker.setPosition(this.mapCenter);
                        this._Marker.setMap(this.map);
                    }else{
                        this.formdata.lat = ''
                        this.formdata.lng = ''
                        console.log(typeof this.formdata.lat,"11111111")
                    }
                    resolve(response.data.data);
                } else {
                    this.$Message.error(response.data.info)
                }
                
            }).catch(error => {
                reject(error);
            });
        });
    },
    /**
     * @augments
     * 对于地区选择的函数处理,处理三级联动城市的选择
     * 类型: func-->(areaChange  addressChange,onSearchResult)
     */
       areaChange(value, selectedData){
            console.log(value)
            console.log(selectedData,"0000")
            var _areatxt = ''
            for(var i = 0,len = selectedData.length;i<len;i++){
                _areatxt += selectedData[i].label
            }
            console.log(_areatxt)
            this.address = _areatxt;
            this.formdata.province = value[0]
            this.formdata.city = value[1]
            this.formdata.county = value[2]
            this.formdata.area_id[0] = value[0];
            this.formdata.area_id[1] = value[1];
            this.formdata.area_id[2] = value[2];
            console.log(this.formdata.area_id,"area_id")
        },
        // 对于 地址的选择地图事件的调用
        addressChange() {
            var _address =   this.formdata.address;
            this.onSearchResult(_address);
            this.mapShow=true;
        },
         onSearchResult(address) {
            var map = this.map
            var local = new AMap.PlaceSearch({
                map: map
            });
            local.search(address,function(status,result){
            });
            var _self = this
            local.on("markerClick",function(event){
                _self.formdata.lng = event.data.location.lng;
                _self.formdata.lat = event.data.location.lat;
            })
        },
   
    //   提交事件的函数处理
      handleSubmit(name1){
          this.tableaction = true;
         setTimeout(() => {
                    this.tableaction = false;
         }, 5000);
        var _this = this;
        _this.formdata.mongo_id = this.$route.params.mongo_id;
      _this.$refs[name1].validate(valid => {
        if (valid) {
        //   this.$Message.success('检测成功!');
          _this.X1 = true;
        } else {
        //   _this.$Message.error("填写信息不完善");
          return
        }
      });
        if(_this.X1==true){
           console.log(_this.formdata,"aa")
        new Promise((resolve, reject) => {
            update2(_this.formdata).then(response => {
                if (response.data.err == 0) {
                    this.$Message.success(response.data.info);
                    this.$router.push({name:'org_doclist'})
                } else {
                    this.$Message.error(response.data.info);
                    return
                }
                resolve();
            }).catch(error => {
                reject(error);
            });
        });
        }else{
            _this.$Message.error("带 * 表单必须完整填写");
            return
        }
        
      },
  },
  
  
   
}
</script>